<script>
  import { ref, onMounted } from 'vue'
  import api from '@/services/api'

  export default {
    name: 'ProfileView',
    setup() {
      const user = ref(null)
      const isEditing = ref(false)
      const loading = ref(false)
      const error = ref('')
      const success = ref('')
      const formData = ref({
        username: '',
        email: '',
        avatar: '',
        bio: '',
      })

      const fetchUser = async () => {
        try {
          const res = await api.get('/auth/current-user')
          if (res.code === 0) {
            user.value = res.data
            Object.assign(formData.value, res.data)
          }
        } catch (err) {
          error.value = '获取用户信息失败'
        }
      }

      const handleUpdateProfile = async () => {
        loading.value = true
        error.value = ''
        success.value = ''
        try {
          const res = await api.put('/user/profile', formData.value)
          if (res.code === 0) {
            success.value = '个人信息更新成功'
            isEditing.value = false
            fetchUser()
          } else {
            error.value = res.message || '更新失败'
          }
        } catch (err) {
          error.value = '更新失败，请重试'
        } finally {
          loading.value = false
        }
      }

      onMounted(fetchUser)

      return {
        user,
        isEditing,
        loading,
        error,
        success,
        formData,
        handleUpdateProfile,
      }
    },
  }
</script>

<template>
  <div class="profile-container">
    <div class="profile-header-section">
      <h1>个人中心</h1>
      <p>管理您的个人信息和偏好设置</p>
    </div>

    <div class="profile-content-wrapper">
      <div v-if="error" class="message-box error-message">{{ error }}</div>
      <div v-if="success" class="message-box success-message">{{ success }}</div>

      <div class="profile-card">
        <div class="avatar-section">
          <img :src="formData.avatar || '/default-avatar.png'" :alt="user?.username" class="avatar" />
          <button v-if="!isEditing" class="edit-profile-btn" @click="isEditing = true">
            <i class="fas fa-edit"></i> 编辑资料
          </button>
        </div>

        <div v-if="!isEditing" class="info-display-section">
          <div class="info-item">
            <span class="info-label">用户名:</span>
            <span class="info-value">{{ user?.username }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">邮箱:</span>
            <span class="info-value">{{ user?.email }}</span>
          </div>
          <div class="info-item bio-item">
            <span class="info-label">个人简介:</span>
            <p class="info-value bio-text">{{ user?.bio || '暂无简介' }}</p>
          </div>
        </div>

        <form v-else @submit.prevent="handleUpdateProfile" class="edit-form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input
              type="text"
              id="username"
              v-model="formData.username"
              required
              :disabled="loading"
            />
          </div>

          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="formData.email" required :disabled="loading" />
          </div>

          <div class="form-group">
            <label for="avatar">头像 URL</label>
            <input type="url" id="avatar" v-model="formData.avatar" placeholder="请输入头像URL" :disabled="loading" />
          </div>

          <div class="form-group">
            <label for="bio">个人简介</label>
            <textarea id="bio" v-model="formData.bio" rows="4" placeholder="简单介绍一下自己" :disabled="loading"></textarea>
          </div>

          <div class="form-actions">
            <button type="button" class="cancel-btn" @click="isEditing = false" :disabled="loading">
              取消
            </button>
            <button type="submit" class="save-btn" :disabled="loading">
              <i v-if="loading" class="fas fa-spinner fa-spin"></i>
              {{ loading ? '保存中...' : '保存' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  color: #fff;
}

.profile-header-section {
  text-align: center;
  margin-bottom: 3rem;
  background: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
}

.profile-header-section h1 {
  font-size: 3em;
  color: #45f3ff;
  margin-bottom: 0.5rem;
}

.profile-header-section p {
  font-size: 1.2em;
  color: #a0a0a0;
}

.profile-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.message-box {
  padding: 1rem;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  text-align: center;
  font-weight: bold;
}

.error-message {
  background-color: rgba(255, 0, 0, 0.2);
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

.success-message {
  background-color: rgba(0, 255, 0, 0.2);
  color: #6bff6b;
  border: 1px solid #6bff6b;
}

.profile-card {
  background: #1c1c1c;
  border-radius: 15px;
  padding: 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.avatar-section {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #45f3ff;
  box-shadow: 0 0 15px rgba(69, 243, 255, 0.6);
  flex-shrink: 0;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-profile-btn {
  background-color: #45f3ff;
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 0.8rem 1.5rem;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  box-shadow: 0 5px 15px rgba(69, 243, 255, 0.4);
}

.edit-profile-btn:hover {
  background-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(69, 243, 255, 0.6);
}

.info-display-section {
  width: 100%;
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #a0a0a0;
  font-size: 1.1em;
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 1rem;
}

.info-value {
  color: #fff;
  font-size: 1.1em;
  text-align: right;
  flex-grow: 1;
  word-break: break-all; /* 防止长文本溢出 */
}

.bio-item {
  flex-direction: column;
  align-items: flex-start;
}

.bio-item .info-label {
  margin-bottom: 0.5rem;
}

.bio-text {
  text-align: left;
  line-height: 1.6;
  color: #e0e0e0;
}

.edit-form {
  width: 100%;
  text-align: left;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  color: #45f3ff;
  font-size: 1em;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #444;
  border-radius: 8px;
  background-color: #333;
  color: #fff;
  font-size: 1em;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #45f3ff;
  box-shadow: 0 0 10px rgba(69, 243, 255, 0.5);
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #888;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn,
.save-btn {
  padding: 0.8rem 1.8rem;
  border-radius: 30px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cancel-btn {
  background-color: #555;
  color: white;
  border: 1px solid #666;
}

.cancel-btn:hover {
  background-color: #666;
  transform: translateY(-2px);
}

.save-btn {
  background-color: #45f3ff;
  color: #1a1a1a;
  border: none;
  box-shadow: 0 5px 15px rgba(69, 243, 255, 0.4);
}

.save-btn:hover {
  background-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(69, 243, 255, 0.6);
}

.save-btn .fas {
  margin-right: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .profile-container {
    padding: 1rem;
  }

  .profile-header-section {
    padding: 1.5rem;
  }

  .profile-header-section h1 {
    font-size: 2.5em;
  }

  .profile-header-section p {
    font-size: 1em;
  }

  .profile-card {
    padding: 2rem;
  }

  .avatar-section {
    width: 120px;
    height: 120px;
  }

  .edit-profile-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.9em;
    margin-top: 1.5rem;
  }

  .info-label,
  .info-value {
    font-size: 1em;
  }

  .form-group label {
    font-size: 0.9em;
  }

  .form-group input,
  .form-group textarea {
    font-size: 0.9em;
    padding: 8px 12px;
  }

  .cancel-btn,
  .save-btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.9em;
  }
}
</style>
